@dashboard-start: #2b3e54;
@dashboard-end: #090a0f;
@dashboard-light: #5e7ea2;
@color-w: #ffffff;
.risk-dashboard {
  box-sizing: border-box;
  background: linear-gradient(to bottom, @dashboard-start 0%, @dashboard-end 100%);
  height: 100vh;
  color: @color-w;
  overflow: hidden;
  .hd {
    height: 60px;
    font-size: 16px;
    border-bottom: 1px solid @dashboard-start;
    padding: 0 20px;
    line-height: 60px;
    color: @color-w;
    box-shadow: 0 1px 11px @dashboard-light;
    .title {
      font-size: 20px;
      text-align: center;
      text-shadow: 0 0 10px @dashboard-start;
    }
    .setting {
      text-align: right;
      i {
        margin: 0 5px;
        cursor: pointer;
      }
    }
    .time {
      i {
        margin-right: 5px;
      }
    }
  }
  .row {
    padding: 20px;
    .col {
      position: relative;
      height: calc(100vh - 60px);
      display: flex;
      flex-direction: column;
      .dashboard-box {
        width: 100%;
        box-shadow: 0 0 5px @dashboard-start inset;
        &.dashboard-box-noborder {
          box-shadow: none;
          border: none;
        }
        .inner {
          padding: 10px;
          .inner-con {
            padding: 10px;
          }
        }
        h4 {
          color: @dashboard-light;
          font-size: 16px;
        }
        border: 1px solid @dashboard-start;
        margin-bottom: 20px;
      }
    }
    .dashboard-box-1 {
      height: 33%;
    }

    .dashboard-box-2 {
      height: 66%;
      margin-bottom: 20px;
    }
    .dashboard-box-3 {
      height: 50%;
    }
    .flex-v {
      display: flex;
      flex-direction: column;
    }
    .dashoard-box-item {
      border-bottom: 1px solid @dashboard-start;
      box-sizing: border-box;
      padding: 5px 10px;
      height: 25%;
      h5 {
        color: @dashboard-light;
        font-size: 14px;
      }
      .count {
        font-size: 24px;
        margin-right: 10px;
      }
      .percent {
        font-size: 20px;
      }
    }
  }
  .table-hd {
    border: 1px solid @dashboard-light;
    padding: 5px;
    color: @dashboard-light;
    margin-bottom: 10px;
  }
  .table-item {
    padding: 10px 5px;
    border-bottom: 1px dashed @dashboard-start;
    color: @dashboard-light;
  }
  .risk-city {
    .index {
      color: @dashboard-light;
      margin-right: 5px;
    }
    .city {
      color: @dashboard-light;
    }
    .value {
      color: @color-w;
    }
  }
}
